<template>
  <view class="wrap">
    <view class="bottomPopup" id="bottomPopup">
      <view ref="TitleRef" class="title" @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend">
        <view class="line"> </view>
      </view>
      <scroll-view v-if="props.showType == '搜索'" class="contentList" scroll-y="true" lower-threshold="60"
        @scrolltolower="scrolltolower">
        <!--        <view class="planRight">
          <uni-icons type="map-pin-ellipse" size="20" @click="emit('changeShowType', {type: '路线', name: 'Driving'})">
          </uni-icons>
          <view>到这里去</view>
        </view> -->
        <p class="planItem" v-for="(item, index) in props.formData.pois" :key="index">
          <view>
            <view>{{item.name}}</view>
            <view>{{item.pname}}{{item.cityname}}{{item.address}}{{item.adname}}</view>
            <view style="color: darkgrey;">{{item.type}}</view>
            <scroll-view v-if="item.photos.length" class="photoBox" scroll-x="true">
              <image v-for="(pItem, pIndex) in item.photos" :key="pIndex" :src="pItem.url"
                @click="clickImage(item.photos, pItem.url)"></image>
            </scroll-view>
          </view>
          <view class="planRight">
            <uni-icons type="map-pin-ellipse" size="20" @click="changeShowDrivingFn(item)">
            </uni-icons>
            <view>到这里去</view>
          </view>
        </p>
      </scroll-view>
      <scroll-view v-else-if="props.showType == '路线'" class="contentList" scroll-y="true" lower-threshold="60"
        @scrolltolower="scrolltolower">
        <view>路线 x</view>
        <view class="menuTrans">
          <uni-icons v-for="(item, index) in activeList" :key="index" custom-prefix="iconfont" :type="item.type"
            size="30" :color="activeItem == index ? '#000' : '#ccc'" @click="changeShowTypeFn(item, index)">
          </uni-icons>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import {
    onMounted,
    reactive,
    ref,
  } from "vue";

  let source = reactive([])
  let TitleRef = ref(null)
  let currentPos = ref([])
  let activeItem = ref(0)
  let activeList = [{
      type: 'icon-icon',
      name: 'Driving'
    },
    {
      type: 'icon-yangshi_icon_tongyong_walk',
      name: 'Walking'
    },
    {
      type: 'icon-bus-alt',
      name: 'Transfer'
    },
    {
      type: 'icon-zihangche',
      name: 'Riding'
    },
  ]

  const props = defineProps({
    formData: {
      type: Object
    },
    showType: {
      type: String
    }
  })

  const emit = defineEmits(['getFormData', 'changeShowType'])

  onMounted(() => {
    resize()
  })

  const openPlan = () => {
    let dom = document.getElementById("bottomPopup")
    dom.animate({
      transform: 'translateY(0)'
    }, {
      duration: 300,
      easing: "linear",
      fill: "forwards"
    });
  }

  const touchstart = (e) => {
    let element = e.changedTouches[0];
    source.client = {
      x: element.clientX,
      y: element.clientY,
    };
  }
  const touchmove = (e) => {
    let element = e.changedTouches[0];
    let maxHeight = document.querySelector('.contentList').offsetHeight
    let offsetHeightCont =
      document.querySelector(".contentList").offsetHeight;
    console.log("sss:" + offsetHeightCont);
    let distance = source.client.y - element.clientY;
    if (distance > maxHeight) {
      document
        .getElementById("bottomPopup")
        .animate({
          transform: `translateY(0)`
        }, {
          duration: 1,
          easing: "linear",
          fill: "forwards"
        });
    } else if (distance < 0 && distance > -maxHeight) {
      document
        .getElementById("bottomPopup")
        .animate({
          transform: `translateY(${-distance}px)`
        }, {
          duration: 1,
          easing: "linear",
          fill: "forwards"
        });
    } else if (distance < -maxHeight) {
      document
        .getElementById("bottomPopup")
        .animate({
          transform: `translateY(${maxHeight})`
        }, {
          duration: 1,
          easing: "linear",
          fill: "forwards"
        });
    } else {
      document
        .getElementById("bottomPopup")
        .animate({
          transform: `translateY(${maxHeight - distance}px)`
        }, {
          duration: 1,
          easing: "linear",
          fill: "forwards"
        });
    }
  }
  const touchend = (e) => {
    let element = e.changedTouches[0];
    let distance = source.client.y - element.clientY;
    if (distance > 0) {
      document
        .getElementById("bottomPopup")
        .animate({
          transform: 'translateY(0px)'
        }, {
          duration: 200,
          easing: "linear",
          fill: "forwards"
        });
    } else {
      document
        .getElementById("bottomPopup")
        .animate({
          transform: 'translateY(5rem)'
        }, {
          duration: 300,
          easing: "linear",
          fill: "forwards"
        });
    }
  }

  const resize = ({
    designWidth = 750,
  } = {}) => {
    const changeView = () => {
      let width =
        document.body.clientWidth || document.documentElement.clientWidth,
        height =
        document.body.clientHeight || document.documentElement.clientHeight;
      if (width > 750) width = 750;
      document
        .getElementsByTagName("html")[0]
        .style.setProperty("font-size", (100 * width) / designWidth + "px");
      if (!width) {
        setTimeout(changeView, 20);
      }
    };
    changeView();
  }

  // 图片浏览
  const clickImage = (photos, url) => {
    let showPhoto = photos.map((v) => v.url)
    uni.previewImage({
      urls: showPhoto, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
      current: url, // 当前显示图片的http链接，默认是第一个
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }

  // 滚到到底部
  const scrolltolower = () => {
    let {
      pageIndex,
      pageSize
    } = props.formData
    emit('getFormData', {
      pageIndex: pageIndex + 1,
      pageSize
    })
  }

  const changeShowDrivingFn = (item) => {
    currentPos.value = [item.location.lng, item.location.lat]
    emit('changeShowType', {
      type: '路线',
      name: 'Driving',
      pos: currentPos.value
    })
  }

  const changeShowTypeFn = (item, index) => {
    activeItem.value = index
    emit('changeShowType', {
      type: '路线',
      name: item.name,
      pos: currentPos.value
    })
  }

  defineExpose({
    openPlan
  })
</script>

<style lang="scss" scoped>
  @import "@/static/iconfont.css";

  .wrap {
    .bottomPopup {
      position: absolute;
      width: 100%;
      bottom: 0;
      transform: translateY(5rem);
      background-color: #fff;
      color: #000;
      border-radius: 10px 10px 0 0;
      font-size: 16px;
      z-index: 202;

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
        height: 20px;
        background-color: #fff;
        border-radius: 10px 10px 0 0;
        border-top: 1px solid #ccc;

        .line {
          width: 32px;
          height: 4px;
          border-radius: 2px;
          background-color: #ccc;
        }
      }

      .contentList {
        height: 5rem;
        overflow-y: auto;

        .planItem {
          border-top: 1px solid #ccc;
          /* border-bottom: 1px solid #ccc; */
          padding: 0.32rem 0.1rem;
          height: 1.5rem;
          font-size: 10px;
          display: flex;
          justify-content: space-between;

          .photoBox {
            display: flex;
            justify-content: space-between;

            image {
              width: 0.7rem;
              height: 0.7rem;
              margin-right: 0.1rem;
            }
          }

          .planRight {
            display: flex;
            flex-direction: column;
          }
        }
      }

      .menuTrans {
        display: flex;
        justify-content: space-around;
        color: #ccc;
      }
    }
  }
</style>
